<template>
  <div id="wK_historySearch" class="wk_historySearch">
    <h3 class="h3">签到状况查询</h3>
    <a-form-model :model="form" :colon="false" style="margin: 10px 0">
      <a-row style="display: flex; align-items: center">
        <a-col :span="4">
          <a-form-model-item
            label="人员名称"
            class="from-item__class"
            :wrapper-col="{ span: 17 }"
          >
            <a-select
              v-model="form.nickname"
              placeholder="请选择人员名称"
              allow-clear
            >
              <a-select-option
                :value="item.nickname"
                v-for="(item, index) in userList"
                :key="index"
                >{{ item.nickname }}</a-select-option
              >
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :span="4" style="margin-left: 40px">
          <a-form-model-item label="时间选择" class="from-item__class">
            <a-date-picker
              @change="onChange"
              valueFormat="YYYY-MM-DD"
              format="YYYY-MM-DD"
            />
          </a-form-model-item>
        </a-col>
        <a-col
          :span="4"
          :offset="1"
          style="display: flex; justify-content: space-between"
        >
          <a-button
            style="letter-spacing: 8px"
            type="primary"
            @click="onSubmit"
            class="sousuobtn btn-style__class"
            >查询</a-button
          >
        </a-col>
      </a-row>
    </a-form-model>
    <!-- 表格 -->
    <div class="tableclass">
      <a-table
        style="height: 94%"
        :data-source="data"
        :pagination="false"
        :columns="columns"
        :rowKey="(record) => record.id"
        size="small"
      >
        <span slot="detailsList" slot-scope="text,record" class="solve-img">
          <template v-for="(img,index) in record.detailsList">
            <div v-viewer>
              <img v-for="(_img,index) in img.signImages" :key="index" :src="_img.fileUrl" alt />
            </div>
          </template>
        </span>
        <template slot="workType1signStatus" slot-scope="text">
          <span v-if="text == 1">正常</span>
          <span v-else-if="text == 2">迟到</span>
          <span v-else-if="text == 3">早退</span>
          <span v-else>-</span>
        </template>
        <template slot="workType2signStatus" slot-scope="text">
          <span v-if="text == 1">正常</span>
          <span v-else-if="text == 2">迟到</span>
          <span v-else-if="text == 3">早退</span>
          <span v-else>-</span>
        </template>
        <!--<template slot="operate">
          <div class="handle">
            <span style="margin-left: 43px;">指令详情</span>
          </div>
        </template>-->
      </a-table>

      <div class="page-box">
        <a-pagination
          :show-total="(total) => `共 ${total} 条记录`"
          v-model="page.current"
          :total="total"
          :defaultPageSize="page.size"
          :item-render="itemRender"
          @change="pagechangeFn"
        />
      </div>
    </div>
    <!--<a-modal
      v-model="visible"
      title="Basic Modal"
      @ok="handleOk"
      width="70%"
      centered
      destroyOnClose
    >
      <div class="mapbox">
        <el-amap
          class="amapContainer"
          :amap-manager="amapManager"
          :mapStyle="mapStyle"
          :events="events"
          :center="center"
          :zoom="zoom"
          :vid="'amap-vue'"
        ></el-amap>
      </div>
    </a-modal>-->
  </div>
</template>

<script>
  import "viewerjs/dist/viewer.css";
  import Viewer from "v-viewer";
  import Vue from "vue";
  Vue.use(Viewer);
import moment from "moment";
import { AMapManager, lazyAMapApiLoaderInstance } from "vue-amap";
let amapManager = new AMapManager();
export default {
  name: "index",
  data() {
    let self = this;
    return {
      moment,
      title: "",
      endOpen: false,
      form: {
        current: 1,
        size: 10,
        nickname: "", //人员姓名
        areaId: "", //公司id
        signType: "", //出勤类型
        signStatus: "", //出勤状态
        year: undefined,
        month: undefined,
        day: undefined,
        userId: "",
      },
      replaceFields: {
        children: "menuList",
        title: "name",
        key: "id",
      },
      columns: [
        {
          title: "序号",
          dataIndex: "num",
          align: "center",
          customRender: (text, record, index) =>
            `${(this.page.current - 1) * this.page.size + index + 1}`,
        },
        // {
        //   title: "部门",
        //   dataIndex: "deptId",
        //   align: "center",
        // },
        {
          title: "姓名",
          dataIndex: "nickname",
          align: "center",
        },
        {
          title: "签到时间",
          dataIndex: "workType1.signTime",
          align: "center",
        },
        {
          title: "签到位置",
          dataIndex: "workType1.signAddress",
          align: "center",
        },
        {
          title: "签到照片",
          dataIndex: "detailsList",
          scopedSlots: { customRender: "detailsList" },
          align: "center",
        },
        {
          title: "签退时间",
          dataIndex: "workType2.signTime",
          align: "center",
        },
        {
          title: "签退位置",
          dataIndex: "workType2.signAddress",
          align: "center",
        },
        {
          title: "签到情况",

          align: "center",
          children: [
            {
              title: "上班",
              dataIndex: "workType1.signStatus",
              scopedSlots: { customRender: "workType1signStatus" },
              width: "10%",
              align: "center",
            },
            {
              title: "下班",
              dataIndex: "workType2.signStatus",
              scopedSlots: { customRender: "workType2signStatus" },
              width: "10%",
              align: "center",
            },
          ],
        },
        // {
        //   title: "操作",
        //   align: "center",
        //   scopedSlots: { customRender: "operate" },
        //   width: "10%",
        // },
      ],
      current: 1,
      page: {
        current: 1,
        size: 10,
      },
      total: 0,
      data: [],
      deptList: [],
      userList: [],
      visible: false,
      treeList: [],
      // 地图
      amapManager,
      mapStyle: "amap://styles/39ba2088b6b8fc67184833f73cceab4d",
      zoom: 10,
      map: "",
      center: [118.4643, 32.0238],
      events: {
        init() {
          lazyAMapApiLoaderInstance.load().then(() => {
            self.initPage();
          });
        },
      },
      date: "", //日期
    };
  },
  methods: {
    a(data) {
      console.log(data);
    },
    //时间
    onChange(date, dateString) {
      console.log(date, dateString);
      if (date != null && dateString != "") {
        this.date = date;
        var a = "";
        a = this.date.split("-");
        console.log(a);
        this.form.year = a[0];
        this.form.month = a[1];
        this.form.day = a[2];
      } else {
        this.form.year = "";
        this.form.month = "";
        this.form.day = "";
      }

      console.log(this.form);
    },

    handleOk(e) {
      console.log(e);
      this.visible = false;
    },
    //初始化地图
    initPage() {
      this.map = this.amapManager.getMap();
    },
    disabledStartDate(startValue) {
      const endValue = this.form.data2;
      if (!startValue || !endValue) {
        return false;
      }
      return startValue.valueOf() > endValue.valueOf();
    },
    disabledEndDate(endValue) {
      const startValue = this.form.date1;
      if (!endValue || !startValue) {
        return false;
      }
      return startValue.valueOf() >= endValue.valueOf();
    },
    handleStartOpenChange(open) {
      if (!open) {
        this.endOpen = true;
      }
    },
    handleEndOpenChange(open) {
      this.endOpen = open;
    },

    //获取数据
    onSubmit() {
      // this.visible = true;
      this.getData();
    },
    getData() {
      this.$api.PostsignList(this.form).then((res) => {
        console.log(res);
        res.data.data.forEach((v) => {
          var Type2 = {},
            Type1 = {};
          v.detailsList.forEach((d) => {
            if (d.workType == 1) {
              console.log(d);

              Type1 = d;
            } else {
              Type2 = d;
            }
          });

          v.workType2 = Type2;
          v.workType1 = Type1;
        });
        this.data = res.data.data;
        console.log(this.data);
        this.total = res.data.total;

        this.data.forEach((v) => {
          if (v.workType1 && v.workType1.signTime) {
            v.workType1.signTime = moment(v.workType1.signTime).format(
              "YYYY-MM-DD HH:ss:mm"
            );
          } else {
            v.workType1.signTime = "-";
          }
          if (v.workType2 && v.workType2.signTime) {
            v.workType2.signTime = moment(v.workType2.signTime).format(
              "YYYY-MM-DD HH:ss:mm"
            );
          } else {
            v.workType2.signTime = "-";
          }
        });
        console.log(this.data);
      });
    },
    //当前登录用户
    getId() {
      this.form.userId = this.$user.id;
    },
    createIterator(items) {
      items.forEach((res) => {
        res.scopedSlots = { title: "custom" };
        if (res.menuList && res.menuList.length > 0) {
          return this.createIterator(res.menuList);
        }
      });
      return items;
    },
    //查询部门
    deptData() {
      this.$api.AreaFindAreasByUserId(this.form.userId).then((res) => {
        console.log(res);
        if (res.data.code == 0) {
          let data = res.data.data;
          let _list = this.createIterator(data);
          this.treeList = _list;
        } else {
          this.$message.info(res.data.errorMessage);
        }
      });
    },
    getUser() {
      this.$api
        .PostuserFindByPage({
          current: "1",
          size: "1000",
          nickname: "",
          deptId: "",
        })
        .then((res) => {
          console.log(res);
          this.userList = res.data.data;
        });
    },
    // 分页方法
    itemRender(current, type, originalElement) {
      if (type === "prev") {
        return <a>上一页</a>;
      } else if (type === "next") {
        return <a>下一页</a>;
      }
      return originalElement;
    },
    pagechangeFn(page, pageSize) {
      this.page.current = page;
      this.page.size = pageSize;
      this.getData();
    },
  },

  mounted() {
    this.getId();
    this.$nextTick(() => {
      this.getData();
      this.deptData();
      this.getUser();
    });
  },
};
</script>
<style scoped src="../../../assets/style/warning.css"></style>
<style scoped lang="scss">
  ::v-deep .solve-img {
    height: 26px;
  }
  ::v-deep .solve-img img {
    width: 24px;
    height: 20px;
    margin-right: 5px;
  }
  .solve-img {
    display: inline-block;
    justify-content: space-evenly;
  }
::v-deep .ant-select-dropdown {
  min-width: 278px;
}
.mapbox {
  width: 100%;
  height: 500px;
}
.amap-box {
  width: 100%;
  height: 100%;
}

#wK_historySearch {
  width: 98%;
  height: 98%;
  padding: 2%;
  box-sizing: border-box;
  position: relative;
  .sousuobtn {
    background-color: #207064;
    border-color: #207064;
  }
  .exportbtn {
    background-color: transparent;
    border: 0;
    color: #207064;
  }
  .content-bottom {
    width: 100%;
    position: absolute;
    bottom: 4%;
    right: 2%;
  }
  .page-box {
    float: right;
  }
  /* 图表 */
  .echarts-box {
    height: 85%;
    width: 100%;
  }
  .line-echarts {
    height: 90%;
  }
  .echarts-title {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    text-align: center;
    padding: 10px 0;
    box-sizing: border-box;
  }
}
::v-deep#wK_historySearch .ant-table-thead > tr:last-child > th:nth-child(1) {
  background: #478350 !important;
  color: #1c2c2c !important;
  border: 0;
}
::v-deep#wK_historySearch .ant-table-thead > tr:last-child > th:nth-child(2) {
  background: #3f698f !important;
  color: #1c2c2c !important;
  border: 0;
}
::v-deep#wK_historySearch .ant-form-item {
  margin-bottom: 0;
  display: flex;
  align-items: center;
}

::v-deep#wK_historySearch .ant-form-item-children {
  display: inline-block;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* 表格样式 */
.tableclass {
  width: 100%;
  height: 86%;
}
.handle {
  width: 100%;
  color: #207064;
  display: flex;
  justify-content: space-between;
}
.handle > span:hover {
  cursor: pointer;
  color: aquamarine;
}

::v-deep#wK_historySearch .ant-table table {
  height: auto;
  border-radius: 0;
  border-left: 1px solid #207064;
  border-right: 1px solid #207064;
}

::v-deep#wK_historySearch .ant-table-thead > tr > th {
  line-height: 22px;
  border-bottom: 0;
  border-radius: 0;
}
::v-deep#wK_historySearch .ant-table-tbody > tr > td {
  border-bottom: 1px solid #2c6a60;
}

// 分页
::v-deep#wK_historySearch .ant-pagination-total-text {
  color: rgba(255, 255, 255, 0.7);
}
</style>
